<template>
	<view class="profile-container">
		<!-- 主要内容区域 -->
		<view class="content">
			
			<view class="profile-list">
				<!-- 头像 -->
				<view class="profile-item" @click="changeAvatar">
					<view class="item-left">
						<text class="item-label">头像</text>
					</view>
					<view class="item-right">
						<u-avatar
							:src="userInfo.avatar"
							size="80"
							shape="circle"
							:defaultSrc="defaultAvatar"
						></u-avatar>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
				</view>
				
				<!-- 昵称 -->
				<view class="profile-item" @click="changeNickname">
					<view class="item-left">
						<text class="item-label">昵称</text>
					</view>
					<view class="item-right">
						<text class="item-value">{{ userInfo.nickname || '请设置昵称' }}</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
				</view>
				
				<!-- 性别 -->
				<view class="profile-item" @click="changeGender">
					<view class="item-left">
						<text class="item-label">性别</text>
					</view>
					<view class="item-right">
						<text class="item-value">{{ userInfo.gender || '请选择' }}</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
				</view>
				
				<!-- 生日 -->
				<view class="profile-item" @click="changeBirthday">
					<view class="item-left">
						<text class="item-label">生日</text>
					</view>
					<view class="item-right">
						<text class="item-value">{{ formatBirthday(userInfo.birthday) || '请选择' }}</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 性别选择弹窗 -->
		<u-action-sheet
			:show="showGenderSheet"
			:actions="genderActions"
			@close="showGenderSheet = false"
			@select="onGenderSelect"
		></u-action-sheet>
		
		<!-- 生日选择弹窗 -->
		<u-datetime-picker
			:show="showBirthdayPicker"
			mode="date"
			:value="userInfo.birthday"
			@confirm="onBirthdayConfirm"
			@cancel="showBirthdayPicker = false"
		></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '',
					nickname: 'u5496',
					gender: '',
					birthday: ''
				},
				defaultAvatar: '/static/logo.png',
				showGenderSheet: false,
				showBirthdayPicker: false,
				genderActions: [
					{ name: '男', value: '男' },
					{ name: '女', value: '女' },
					{ name: '保密', value: '保密' }
				]
			}
		},
		onLoad() {
			// 页面加载时获取用户信息
			this.loadUserInfo();
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				// 这里可以从本地存储或服务器获取用户信息
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo) {
					this.userInfo = { ...this.userInfo, ...storedUserInfo };
				}
			},
			
			// 保存用户信息
			saveUserInfo() {
				uni.setStorageSync('userInfo', this.userInfo);
			},
			
			// 格式化生日显示
			formatBirthday(birthday) {
				if (!birthday) return '';
				
				// 如果是时间戳，转换为日期对象
				let date;
				if (typeof birthday === 'number') {
					date = new Date(birthday);
				} else if (typeof birthday === 'string') {
					date = new Date(birthday);
				} else {
					date = birthday;
				}
				
				// 检查日期是否有效
				if (isNaN(date.getTime())) {
					return '';
				}
				
				// 格式化为 YYYY-MM-DD 格式
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			},
			
			// 更换头像
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						// 这里可以上传图片到服务器
						this.userInfo.avatar = tempFilePath;
						this.saveUserInfo();
						uni.showToast({
							title: '头像更新成功',
							icon: 'success'
						});
					}
				});
			},
			
			// 修改昵称
			changeNickname() {
				uni.showModal({
					title: '修改昵称',
					editable: true,
					placeholderText: '请输入昵称',
					content: this.userInfo.nickname,
					success: (res) => {
						if (res.confirm && res.content.trim()) {
							this.userInfo.nickname = res.content.trim();
							this.saveUserInfo();
							uni.showToast({
								title: '昵称修改成功',
								icon: 'success'
							});
						}
					}
				});
			},
			
			// 修改性别
			changeGender() {
				this.showGenderSheet = true;
			},
			
			// 性别选择
			onGenderSelect(e) {
				this.userInfo.gender = e.value;
				this.showGenderSheet = false;
				this.saveUserInfo();
				uni.showToast({
					title: '性别设置成功',
					icon: 'success'
				});
			},
			
			// 修改生日
			changeBirthday() {
				this.showBirthdayPicker = true;
			},
			
			// 生日确认
			onBirthdayConfirm(e) {
				// 确保保存的是标准格式的日期字符串
				this.userInfo.birthday = e.value;
				this.showBirthdayPicker = false;
				this.saveUserInfo();
				uni.showToast({
					title: '生日设置成功',
					icon: 'success'
				});
			},
			
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['帮助', '联系客服', '关于我们'],
					success: (res) => {
						console.log('选择了第' + (res.tapIndex + 1) + '个按钮');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.profile-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.content {
		padding: 20rpx;
		
		.profile-list {
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			
			.profile-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 1rpx solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				&:active {
					background-color: #f8f8f8;
				}
				
				.item-left {
					.item-label {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
					}
				}
				
				.item-right {
					display: flex;
					align-items: center;
					
					.item-value {
						font-size: 28rpx;
						color: #666;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
}
</style> 